<template>
  <div>
    <div>
      <div class='interfaceFlowSelectText'>{{$t('接口')}}</div>
      <el-select v-model="record.interface" :placeholder="$t('接口')" ref="interface" size='small' filterable style="margin-bottom:10px;margin-right:30px;" @change="listData">
        <el-option v-for="item in interfaceList" :key="item.strPhysicsName" :label="item.strPhysicsName" :value="item.strPhysicsName">
        </el-option>
      </el-select>
      <div class='interfaceFlowSelectText'>{{$t('时间')}}</div>
      <el-select v-model="record.type" :placeholder="$t('时间')" ref="type" size='small' filterable style="margin-bottom:10px;" @change="listData">
        <el-option v-for="(item, key) in dateList" :key="key" :label="item" :value="key">
        </el-option>
      </el-select>
    </div>
    <LineEchart :flowList='flowList'></LineEchart>
    <BarEchart :flowList='flowList'></BarEchart>
  </div>
</template>

<script>
import LineEchart from './components/LineEchart'
import BarEchart from './components/BarEchart'
import { getFlowStatistics } from '@/api/network/flow'
import { getPhysicalApiArray } from '@/api/network/api/physical'
import { selectClass } from '@/utils/input-class.js'
export default {
  name: 'InterfaceFlow',
  components: {
    LineEchart,
    BarEchart
  },
  data () {
    return {
      lang: this.$i18n.locale,
      flowList: {
        rate: [],
        rx: [],
        rx_max_rate: [],
        rx_min_rate: [],
        rx_rate: [],
        time: [],
        total_flow: [],
        total_time: [],
        tx: [],
        tx_max_rate: [],
        tx_min_rate: [],
        tx_rate: []
      },
      record: {
        interface: '',
        type: 'hour'
      },
      dateList: {
        'hour': this.$t('最近一小时'),
        'day': this.$t('最近一天'),
        'week': this.$t('最近一周'),
        'month': this.$t('最近一个月')
      },
      interfaceList: []
    }
  },
  created () {
    getPhysicalApiArray().then(res => {
      if (res.status === 0) {
        this.interfaceList = res.info
        this.record.interface = this.interfaceList[0].strPhysicsName
        this.listData()
      }
    })
  },
  mounted () {
    this.$nextTick(() => {
      const selectData = ['interface', 'type']
      selectClass(this.$refs, selectData)
    })
  },
  methods: {
    listData () {
      getFlowStatistics(this.record).then(res => {
        if (res.status === 0) {
          this.flowList = res.info
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.interfaceFlowSelectText {
  margin-right: 10px;
  display: inline-block;
}
</style>
